<template>
  <div class="media_popular">
    <div v-if="$store.state.device !== 'APP'" class="nav_top_list">
      <van-icon name="arrow-left" class="left_btn" @click="$router.go(-1)"/>
    </div>
    <div :class="$store.state.device !== 'APP'?'banner_user' : 'banner_user app_nav'">
      <img class="bg_gs_img" src="../../../assets/img/modules/media/icon_33.png" alt="">
      <div class="bg_gs"></div>
      <div class="user_img">
        <div class="text_tj">热门推荐</div>
        <p>{{nowWeek}} · 热门资讯</p>
      </div>
    </div>
    <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad">
      <div class="popular_body">
        <a :href="'/media-detail?id=' + item.post.id" v-for="(item, index) in topList" :key="item.postTagName + '' + index" class="item_popular">
          <img class="left_img" :src="item.images[0]" alt="">
          <span v-if="index < 3" class="left_span">Top{{index+1}}</span>
          <div class="right_body">
            <h5>{{item.post.postTitle}}</h5>
            <div class="footer_body">
              <div class="footer_left_img">
                <img v-if="item.isV === 2" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
                {{item.user_nickName}}
              </div>
              <div class="right_time">{{item.expireData}}</div>
            </div>
          </div>
        </a>
      </div>
      <!--加载状态-->
      <div v-for="item in 4" :key="item">
        <van-skeleton
            title
            style="margin-top: 30px"
            :row="4"
            :loading="loading">
        </van-skeleton>
      </div>
    </van-list>
    <div  v-if="footerShow" class="no_data_title">
      <p>没有更多了</p>
    </div>
  </div>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
  name: 'media_popular',
  components: {},
  data () {
    return {
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      footerShow: false, // 底部标志显示
      topList: [], // 热门文章数据
      current: 1, // 当前页
      size: 5, // 每页条数
      nowWeek: '' // 设置的星期 日期
    }
  },
  props: {},
  watch: {
  },
  methods: {
    /* wf_Huang 2019/9/16 0016 获取当前数据 */
    getTopList () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpposts/getPostsHotList?current=${this.current}&size=${this.size}&openid=${this.$store.state.openid}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('文章列表查询失败~')
          return false
        }
        if (res.data.length < this.size) {
          this.footerShow = true
          this.finished = true
        } else {
          this.footerShow = false
        }
        res.data.forEach(item => {
          this.topList.push(item)
        })
        this.loading = false
        this.current = this.current + 1
      }).catch(() => {})
    },
    /* wf_Huang 2019/9/16 0016 上拉加载  */
    onLoad: debounce(function () {
      this.getTopList()
    }, 100, { 'leading': true, 'trailing': false }),
    /* wf_Huang 2019/9/16 0016 获取当前时间 星期 */
    getTimeDay () {
      // 列举Week
      let weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      // 获取当前时间
      let dayDate = new Date()
      // 获取星期几
      let day = dayDate.getDay()
      // 获取当前月
      let month = dayDate.getMonth() + 1
      // 获取当前日
      let date = dayDate.getDate()
      // 自动补零
      month = (month < 10) ? '0' + month : month
      date = (date < 10) ? '0' + date : date
      this.nowWeek = weekday[day] + '  ' + month + '-' + date
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    this.getTimeDay()
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .media_popular {
    .nav_top_list{
      z-index: 99;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.14);
      .left_btn{
        color: #999999;
        font-size: 32px;
        margin-right: 130px;
      }
      span{
        font-size: 32px;
        color: #181818;
        font-weight: bold;
      }
      .btn_right{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        a{
          height: 100%;
          display: flex;
          padding: 0 10px;
          position: relative;
          &:nth-child(1){
            img{
              width: 36px;
              height: 34px;
            }
          }
          &:nth-child(2){
            img{
              width: 34px;
              height: 34px;
            }
          }
          &:nth-child(3){
            img{
              width: 34px;
              height: 34px;
            }
          }
          .active{
            width: 18px;
            height: 18px;
            position: absolute;
            right: 5px;
            top: 1px;
          }
        }
      }
    }
    .banner_user{
      width: 750px;
      height: 220px;
      background-size: 100%;
      padding: 60px 32px;
      margin: 100px auto 0;
      position: relative;
      overflow: hidden;
      z-index: 0;
      .bg_gs,.bg_gs_img{
        width: 150%;
        height: 200%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        background-color: rgba(67, 90, 95, 0.62);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        filter: blur(40px);
      }
      .user_img{
        text-align: center;
        .text_tj{
          font-size:42px;
          font-weight:600;
          color:rgba(255,255,255,1);
        }
        p{
          font-size:26px;
          font-weight:400;
          color:rgba(255,255,255,1);
        }
      }
    }
    .popular_body{
      margin: 31px;
      padding: 50px 0 0;
      .item_popular{
        position: relative;
        margin: 0 0 30px;
        height:178px;
        display: block;
        .left_img{
          width:236px;
          height:178px;
          border-radius:4px;
          position: absolute;
          left: 0;
          top: 0;
        }
        .left_span{
          position: absolute;
          left: -10px;
          top: -10px;
          width:74px;
          height:32px;
          background:rgba(255,0,0,1);
          border-radius:4px;
          font-size:22px;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .right_body{
          padding: 0 0 0 260px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-content: space-between;
          height: 100%;
          h5{
            font-size: 32px;
            color: #333333;
            line-height: 45px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            margin: 0;
          }
          .footer_body{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .footer_left_img{
              font-size:22px;
              font-weight:400;
              color:rgba(153,153,153,1);
              display: flex;
              align-items: center;
              img{
                width: 26px;
                height: 26px;
                margin-right: 10px;
              }
            }
            .right_time{
              font-size:22px;
              font-weight:400;
              color:rgba(153,153,153,1);
            }
          }
        }
      }
    }
  }
</style>
